<script setup lang="ts">
import { fetchHomeInfoData } from "~/service/home";
import { fetchHomeInfoData2 } from "~/service/home";

interface IReturnData {
    code: number;
    data: any;
}

const BASE_URL = "http://codercba.com:9060/juanpi/api";

const getData = () => {
    $fetch(BASE_URL + "/homeInfo", {
        method: "GET",
    }).then(res => {
        console.log(res);
    });
};

// 1。使用$fetch 发送请求. 双端都会发送请求.一共请求两次
// getData();

// 2.使用useAsyncData. 利用useAsyncData第一个参数作为标记,只发送一次请求,数据传递给客户端
/* const { data } = await useAsyncData<IReturnData>("user", () =>
    $fetch(BASE_URL + "/homeInfo", {
        method: "GET",
    })
); */

// 3.使用useFetch,他是useAsyncData语法糖.
/* const { data } = await useFetch<IReturnData>(BASE_URL + "/homeInfo", {
    method: "GET",
}); */
// console.log(data.value.data);

// 第二种与第三种两种方法在页面刷新时 不会 在客户端发送请求, 因为刷新页面请求服务器,服务器将数据请求好传给客户端.
//  在切换路由时 会 在客户端发送请求, 此时没有刷新页面, 没有触发服务器, 自己获取数据自己加载, 属于spa行为.

// 4.发送post请求
/* const { data } = await useFetch<IReturnData>("/goods", {
    method: "POST",
    baseURL: BASE_URL,
    body: {
        count: 2,
    },
}); */

// 5.useFetch的拦截器
/* const { data } = await useFetch<IReturnData>(BASE_URL + "/homeInfo", {
    method: "GET",
    onRequest({ request, options }) {
        // console.log("onRequest invoked", options);
        options.query = options.query || { name: "John" };
    },
    onRequestError({ request, options, error }) {
        console.log("onRequestError invoked");
    },
    onResponse({ request, options, response }) {
        console.log("onResponse invoked", request, response);
        // 修改response一定要修改response对象，return对象不生效
        response._data = { name: "Dear" };
    },
    onResponseError() {
        console.log("onResponseError invoked");
    },
}); */

// 6.封装useFetch
const { data } = await fetchHomeInfoData<any>();

console.log(data.value.data.adsInfo);

// const { data } = fetchHomeInfoData2();

const sendHttpRequest = () => {};
</script>

<template>
    <div>HowDataFetch page</div>
    <button @click="sendHttpRequest">发送http请求</button>
</template>

<style scoped lang="scss"></style>
